// 用于工作台场景使用的全局通用部分样式，这为简易方案，后续对接也方便

// 注意，这个文件中，所有的样式必须写在iwhale-前缀样式（如iwhale-dashboard）之下，以保证不会影响到其他厂商；
// 也因此，这个文件暂时不能用于覆盖popper弹出层样式！依然必须在popper-class内附带专用的iwhale-dashboard

// ！！！这里使用到的样式禁止!important声明！！！
// 保留实际组件覆盖的机会。这里的样式仅仅是用于尽可能的涵盖通用样式，以减少目前填坑的工作量

.iwhale-dashboard {
  // 基本
  // 主题色
  --iw-theme-color: #FF6A6C;
  // 文字色
  --iw-text-color: #606266;
  // 图标色
  --iw-icon-color: #909399;
  // 辅助文字色
  --iw-subtext-color: #909399;
  // 表单标签色
  --iw-form-label-color: #909399;
  // 信息色
  --iw-info-color: #1890FF;

  // 输入框覆写
  .el-textarea__inner {
    color: var(--iw-text-color);
    font-size: 14px;
    padding: 6px 12px;
    &.is-disabled {
      color: var(--iw-subtext-color);
      border-color: #DCDFE6;
      background-color: #F5F7FA;
      &::placeholder {
        color: var(--iw-subtext-color);
      }
    }
    &::placeholder {
      color: var(--iw-subtext-color);
    }
    &:focus {
      border-color: #A9A9A9;
    }
  }
  .el-input {
    &.is-disabled {
      .el-input__inner {
        color: var(--iw-subtext-color);
        border-color: #DCDFE6;
        background-color: #F5F7FA;
        &::placeholder {
          color: var(--iw-subtext-color);
        }
      }
    }
    .el-input__inner {
      color: var(--iw-text-color);
      font-size: 14px;
      padding: 0 12px;
      .el-input.is-disabled .el-input__inner
      .el-icon-circle-close:before { // 统一覆写所有的el-icon-circle-close。注意，这会使得系统里失去原来那个空心版本
        color: var(--iw-subtext-color);
        font-size: 28px;
        font-family: 'iconfont';
        content: "\ebf7"; // FIXME 注意，这个是基于iconfont的值，应该是涂色版的关闭图标，如果图标库有变动会出问题
      }
      &::placeholder {
        color: var(--iw-subtext-color);
      }
      &:focus {
        border-color: #A9A9A9;
      }
    }
    .el-input__suffix {
      right: 6px;
    }
    .el-input__suffix-inner {
      color: var(--iw-text-color);
      .el-icon-circle-close:before { // 统一覆写所有的el-icon-circle-close。注意，这会使得系统里失去原来那个空心版本
        color: var(--iw-subtext-color);
        font-size: 28px;
        font-family: 'iconfont';
        content: "\ebf7"; // FIXME 注意，这个是基于iconfont的值，应该是涂色版的关闭图标，如果图标库有变动会出问题
      }
    }
  }

  .el-range-editor {
    &.is-disabled {
      background-color: #F5F7FA;
      color: var(--iw-subtext-color);
      .el-range-separator {
        color: var(--iw-text-color);
        min-width: 30px;
      }
      input {
        background-color: #F5F7FA;
        color: var(--iw-text-color);
        &::placeholder {
          color: var(--iw-subtext-color);
        }
      }
    }
    .el-range-separator {
      height: auto;
    }
    .el-range__icon {
      color: var(--iw-icon-color);
    }
    .el-range-input {
      font-size: 14px;
      text-align: left;
      padding-left: 12px;
      &::placeholder {
        color: var(--iw-subtext-color);
      }
    }
    &.is-active, &.is-active:hover {
      border-color: #a9a9a9;
    }
  }

  // 计数器覆写
  .el-input-number {
    &.is-disabled {
      opacity: .4;
      background-color: #fff;
      color: var(--iw-text-color);
      .el-input-number__decrease,
      .el-input-number__increase {
        color: var(--iw-text-color);
      }
      .el-input-number__decrease:hover, .el-input-number__increase:hover {
        color: var(--iw-text-color);
        cursor: not-allowed;
      }
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      color: var(--iw-text-color);
    }
    .el-input-number__decrease:hover:not(.is-disabled),
    .el-input-number__increase:hover:not(.is-disabled) {
      ~.el-input .el-input__inner:not(.is-disabled) {
        border-color: #DCDFE6;
      }
    }
  }

  // 选择下拉框覆写
  .el-select {
    .el-select__input {
      color: var(--iw-text-color);
    }
    .el-input__inner:focus {
      border-color: #C0C4CC;
    }
    .el-input {
      &.is-focus {
        .el-input__inner {
          border-color: #C0C4CC;
        }
      }
      &.is-disabled {
        .el-input__inner:hover {
          border-color: #DCDFE6;
        }
      }
      &.el-input--suffix {
        .el-input__inner {
          padding-right: 48px !important; // 被common.scss覆盖，被迫important
        }
      }

      .el-select__caret{
        color: var(--iw-text-color);

        &.el-icon-arrow-up {
          display: block !important; // 规范要求长久显示，覆盖原版内容
        }

        &.el-icon-circle-close {
          position: absolute;
          top: 0;
          right: 20px;
        }
      }
    }
  }

  &.el-select-dropdown {
    margin-top: 6px;
    margin-bottom: 6px;

    .el-select-dropdown__wrap {
      .el-select-dropdown__list {
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
      }
    }

    .el-select-dropdown__item {
      padding: 0 12px;
    }
    // 多选时，下拉的选中项目不需要背景色
    &.is-multiple {
      .el-select-dropdown__item {
        padding: 0 12px;
        .el-checkbox {
          &.is-checked .el-checkbox__label {
            color: var(--iw-theme-color);
          }
          .el-checkbox__label {
            padding-left: 6px;
            color: var(--iw-text-color);
          }
        }
        &.selected {
          background-color: transparent;
        }
      }
    }

    .el-select-dropdown__item {
      color: var(--iw-text-color);

      // 按照设计师要求，覆写el-select原本的滞留hover属性，只有严格悬停才会hover
      &.hover {
        background-color: transparent;
        &:hover {
          background-color: rgba(255, 106, 108, 0.1);
        }
      }
      &:hover {
        background-color: rgba(255, 106, 108, 0.1);
      }
      &.selected {
        color: var(--iw-theme-color);
        background-color: rgba(255, 106, 108, 0.1);
      }
    }
  }

  .el-radio,
  .el-radio.is-bordered {
    .el-radio__label {
      font-size: 14px;
    }
  }

  .el-checkbox,
  .el-checkbox.is-bordered,
  .el-checkbox.is-bordered.el-checkbox--small {
    &.is-disabled {
      border-color: #FF6A6C;
      opacity: 0.4;
      .el-checkbox__inner {
        background-color: #FFF;
      }
      &.is-checked {
        .el-checkbox__inner {
          background-color: #FF6A6C;
          border-color: #FF6A6C;
          &::after {
            border-color: #fff;
          }
        }
      }
    }
    .el-checkbox__input {
      .el-checkbox__inner {
        width: 14px;
        height: 14px;
        border-radius: 3px;
      }

      &.is-checked {
        .el-checkbox__inner {
          &::after {
            width: 3px;
            height: 7px;
            top: 0px;
            left: 4px;
            border-width: 2px;
          }
        }
      }
    }
    .el-checkbox__label {
      font-size: 14px;
    }
  }

  .el-button {
    padding: 0 12px;
    font-size: 14px;
    &.el-button--text {
      color: var(--iw-info-color);
      &.is-disabled {
        color: var(--iw-info-color);
        cursor: not-allowed; /* 设置光标为不可用 */
        opacity: 0.4; /* 设置透明度 */
        &:hover {
          opacity: 0.4; /* 保持透明度不变 */
        }
      }
    }
    &:not(.is-disabled).el-button--default {
      &:focus,
      &:hover {
        background: #fff;
        border: 1px solid #DCDFE6;
        border-color: #DCDFE6;
        color: #606266;
      }
    }
    &:not(.is-disabled).el-button--primary {
      &:focus,
      &:hover {
        background-color: var(--theme, #FF6A6C);
        border-color: var(--theme, #FF6A6C);
        color: #FFF;
      }
    }
    &:not(.is-disabled):hover {
      opacity: 0.6;
    }
    &:not(.is-disabled):active {
      opacity: 0.8;
    }
    &.is-disabled {
      opacity: 0.4; /* 设置透明度 */
      cursor: not-allowed; /* 设置光标为不可用 */
      &:hover {
        opacity: 0.4; /* 保持透明度不变 */
      }
    }
    span {
      line-height: 14px;
      height: 14px;
      display: inline-block;
      font-size: 14px;
    }
  }

  // 日期输入框覆写
  .el-date-editor {
    &.el-input--prefix {
      .el-input__inner {
        padding-left: 34px;
      }

      .el-input__prefix{
        i.el-input__icon {
          font-size: 14px;
          color: #909399;
        }
      }
    }
    .el-input__inner {
      padding-left: 12px;
    }
    .el-range__icon {
      margin-left: 0;
    }
  }

  .el-table {
    .cell {
      font-size: 14px;
      padding: 0 10px;
    }

    // 使固定列覆盖表头（为什么原本的zindex是3？
    .el-table__fixed-right {
      z-index: 4;
    }
  }

  // 分页器覆写
  .el-pagination.is-background,
  .el-pagination {
    line-height: 1;
    padding: 12px 0;
    button.btn-prev, button.btn-next {
      &[disabled] {
        opacity: .4;
      }
      color: var(--iw-text-color);
    }
    span:not([class*=suffix]) {
      height: 22px;
      line-height: 22px;
      font-size: 12px;
    }
    .el-pagination__jump,
    .el-pagination__sizes {
      .el-input .el-input__inner {
        height: 22px;
        font-size: 12px;
      }
      .el-select__caret.el-input__icon.el-icon-arrow-up {
        line-height: 22px;
      }
    }
    .el-pagination__jump {
      margin-left: 6px;
      .el-input__inner {
        width: 48px !important;
      }
    }
    .el-pagination__sizes {
      margin-right: 1px;
      .el-input {
        width: 80px;
        .el-input__inner {
          padding-right: 25px !important;
          &:hover {
            border-color: #A9A9A9;
          }
        }
      }
    }
    .el-pagination__total {
      margin-right: 6px;
    }
    .el-select .el-input {
      margin: 0;
    }
    // 替换分页器按钮为iconfont版本（会影响尺寸）
    button.btn-prev {
      height: 22px;
      min-width: 22px;
      line-height: 22px;
    }
    button.btn-next {
      height: 22px;
      min-width: 22px;
      line-height: 22px;
    }
    .el-pager {
      li {
        margin: 0;
        height: 22px;
        min-width: 22px;
        line-height: 22px;
        border-radius: 4px;
        color: var(--iw-text-color);

        &:not(.disabled).active {
          background: var(--theme, #FF6A6C);
          border: 1px solid var(--theme, #FF6A6C);
          &:hover {
            color: #fff;
          }
        }
        + li {
          margin-left: 4px;
        }
      }
      .more::before {
        line-height: 22px;
      }
    }
  }

  // 表格分页器 Pagination组件里面包了一层class
  .pagination-container {
    padding: 0px !important;
  }

  // 树组件
  .el-tree {
    .el-tree-node__content {
      height: 32px;
    }
    .el-tree-node__expand-icon {
      color: var(--iw-subtext-color);
      padding: 0;
      margin-right: 4px;
      transform: rotate(-90deg);
      &.is-leaf {
        color: transparent;
      }
      &.expanded {
        transform: rotate(0deg);
      }
      &.el-icon-caret-right {
        // 强制覆盖箭头尺寸
        &::before {
          font-size: 20px;
          font-family: 'iconfont';
          content: "\eb8d";
        }
      }
    }
    &.el-tree--highlight-current {
      .el-tree-node {
        &.is-current {
          >.el-tree-node__content {
            color: var(--iw-theme-color);
            background-color: rgba(255, 106, 108, 0.1);
          }
        }
      }
    }

    .el-tree-node {
      &:focus {
        >.el-tree-node__content {
          background-color: rgba(255, 106, 108, 0.1);
        }
      }
      .el-tree-node__content {
        font-size: 14px;
        padding-right: 12px;
        &:hover {
          background-color: rgba(255, 106, 108, 0.1);
        }
      }
    }
  }

  // 开关覆写
  //.el-switch {
  //  height: 16px;
  //  line-height: 16px;
  //  width: 32px;
  //  span.el-switch__core {
  //    height: 16px;
  //    width: 32px;
  //    &::after{
  //      top: 0.5px;
  //      left: 2px;
  //      width: 12px;
  //      height: 12px;
  //      border-radius: 0;
  //      clip-path: circle(37.5%);
  //    }
  //  }
  //  &.is-checked {
  //    span.el-switch__core {
  //      &::after {
  //        left: 100%;
  //        margin-left: -14px;
  //      }
  //    }
  //  }
  //}

  // 滚动条覆写
  // 使用element的叠加滚动条的组件，单独修改叠加滚动条的样式
  .el-scrollbar {
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .el-scrollbar__wrap {
      // el-scrollbar的偏移量会导致尺寸异常，推测这是它用来规避原生滚动条尺寸的
      // 强行覆盖它
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: transparent;
      }
      .el-scrollbar__view > div {
        &::-webkit-scrollbar {
          width: 0px;
          height: 0px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: transparent;
        }
      }
    }
    .el-scrollbar__bar {
      right: 0px;
    }
  }
  .el-scrollbar__thumb {
    background-color: #DCDFE6;
  }
  // 滚动条覆写
  ::-webkit-scrollbar,
  &::-webkit-scrollbar {
    width: 6px ;
    height: 6px ;
    border-radius: 3px ;
  }

  ::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb {
    border-radius: 3px ;
    background-color: #DCDFE6;
    border: 0 ;
  }

  ::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgb(197, 199, 205);
  }

  .el-scrollbar__wrap {
    &::-webkit-scrollbar {
      width: 0px ; // 使用了el-scrollbar的容器，隐藏原生滚动条，交给scrollbar处理
    }
  }

  // 覆写通用信息提示弹窗
  &.iwhale-msgbox {
    .el-message-box__header {
      padding: 12px;
      height: 48px;
      .el-message-box__title {
        padding-left: 4px;
      }
      .el-message-box__headerbtn {
        top: 12px;
        right: 12px;
      }
    }
    .el-message-box__content {
      padding: 0 12px;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .el-message-box__btns {
      padding: 0 12px;
      .el-button {
        width: 60px;
        height: 32px;
      }
    }
  }

  // --------------------------------------------------------------------------------------------------------
  // 面对40版本检查的临时解决方案：工作台的设计稿没有彻底更新。如果需要使用旧版本的“规范”（如果有的话），增加一个old样式。
  // 在工作台全部按新规范执行后删除以下定义即可。
  &.iw-old {

    // 输入框覆写
    .el-input {
      .el-input__inner {
        padding: 0 14px;
      }
    }
  }

  .f-search .f-from .el-row .el-col .el-form-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: normal;
      color: #606266;
    }

    .el-form-item__content {
      padding: 0 12px;
      padding-right: 0;
    }

    .el-input--small .el-input__inner {
      color: #606266;
      padding-left: 12px;
    }

    .el-date-editor .el-range-separator {
      color: #606266;
      line-height: 32px !important;
      min-width: 30px;
    }

    .el-date-editor .el-range__icon::before {
      top: 3.5px;
      position: absolute;
      left: 12px;
    }
  }

  .f-search {
    .f-buttons {
      .el-col {
        display: flex;
        float: left;

        &.f-buttons-right {
          justify-content: end;
          float: right;

          .el-button {
            margin: 0 0 0 12px;
          }
        }
      }

      .el-button {
        height: 32px;
        border-radius: 4px;
        padding: 8px 12px;
        min-width: 60px;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        margin: 0 12px 0 0;
        font-size: 14px;

        &:not(.is-disabled):hover {
          background: #FFF;
          border: 1px solid #DCDFE6;
          color: #606266;
          opacity: 0.6;
        }

        &:not(.is-disabled):active {
          background: #FFF;
          border: 1px solid #DCDFE6;
          color: #606266;
          opacity: 0.8;
        }

        &.is-disabled {
          &.el-button--primary {
            color: #FFF;
            background-color: var(--theme, #FF6A6C);
            border-color: var(--theme, #FF6A6C);
            opacity: 0.4; /* 设置透明度 */
            cursor: not-allowed; /* 设置光标为不可用 */
            &:hover {
              opacity: 0.4; /* 保持透明度不变 */
            }
          }
          &.el-button--default {
            background: #fff;
            border: 1px solid #DCDFE6;
            border-color: #DCDFE6;
            color: #606266;
            opacity: 0.4; /* 设置透明度 */
            cursor: not-allowed; /* 设置光标为不可用 */
            &:hover {
              opacity: 0.4; /* 保持透明度不变 */
            }
          }
        }

        span {
          line-height: 14px;
          height: 14px;
          display: inline-block;
          font-size: 14px;
        }

        &:not(.is-disabled).el-button--default {
          &:focus,
          &:hover {
            background: #fff;
            border: 1px solid #DCDFE6;
            border-color: #DCDFE6;
            color: #606266;
          }
        }

        &:not(.is-disabled).el-button--primary {
          color: #FFF;
          background-color: var(--theme, #FF6A6C);
          border-color: var(--theme, #FF6A6C);

          &:hover {
            color: #FFF;
            background-color: var(--theme, #FF6A6C);
            border-color: var(--theme, #FF6A6C);
            opacity: 0.6;
          }

          &:active {
            color: #FFF;
            background-color: var(--theme, #FF6A6C);
            border-color: var(--theme, #FF6A6C);
            opacity: 0.8;
          }
        }

        &.iconfont {
          span {
            margin-left: 6px;
          }
        }
      }
    }
  }

  // 对表单自动撑高报错提示
  .iw-form-error {
    .el-form-item {
      .el-form-item__error {
        &.el-zoom-in-top-leave-active {
          display: none;
        }
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 0;
        color: #FF6A6C;
        position: static;
        text-align: left;
        margin-bottom: -6px;
        font-size: 12px;
      }
    }
  }
  // form表单
  .el-form {
    .el-form-item--small.el-form-item {
      margin-bottom: 12px;
    }
    .el-form-item {
      .el-form-item__label {
        font-size: 14px;
        font-weight: normal;
        color: #606266;
      }

      .el-form-item__content {
        padding: 0 12px;
        padding-right: 0;
      }

      .el-input--small .el-input__inner {
        color: var(--iw-text-color);
        padding-left: 12px;
      }
      .el-input--small.is-disabled .el-input__inner {
        color: var(--iw-subtext-color);
        border-color: #DCDFE6;
        background-color: #F5F7FA;
        padding-left: 12px;
        &::placeholder {
          color: var(--iw-subtext-color);
        }
      }

      .el-date-editor .el-range-separator {
        color: #606266;
        line-height: 32px !important;
        min-width: 30px;
      }

      .el-date-editor .el-range__icon::before {
        top: 1px;
        position: absolute;
        left: 12px;
      }
    }
  }
  // 分割线上下12px
  .custom-hr {
    margin: 12px 0;
  }

  .el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 0px !important;
  }

  &.el-dialog > .el-dialog__body {
    padding: 12px;
  }
}
